import React, { useEffect, useState } from "react";
import { useLocation, withRouter } from "react-router-dom";
import { postMoviesDetailApi } from "@/utils/api";
import Navadv from "../home/componnets/Navadv";
import "./index.scss";
import { Icon } from "zarm";
import Header from "../home/componnets/Header";
const TabIcon = Icon.createFromIconfont(
  "//at.alicdn.com/t/font_2651391_s0p3yxbovhi.js"
);
const Index = () => {
  const moviesid = useLocation().pathname.split("/details/")[1];
  const [obj, setlist] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const res = await postMoviesDetailApi({ id: moviesid });
      setlist(res.result);
    };
    fetchData();
    // eslint-disable-next-line
  }, []);

  return (
    <div className="details">
      <Header />
      <Navadv />
      <div className="html" style={{ background: obj.backgroundColor }}>
        <p className="header-title">猫眼电影&gt;{obj.nm}</p>
        {/*  点电影信息  */}
        <div className="movies-detail-header">
          <img src={obj.img?.split("w.h").join("")} alt="" />
          <div className="detail-content">
            <h1 className="title">{obj.nm}</h1>
            <p>{obj.filmAlias}</p>
            <p>
              {obj.cat}

              <i className="ver">{obj.ver + "MAX"}</i>
            </p>
            <p>{obj.star}</p>
            <p>{obj.pubDesc}</p>
            <div className="btn">
              <span className="lookbtn">
                <TabIcon type="icon-aixin" />
                想看
              </span>
              <span className="lookbtn">
                <TabIcon type="icon-xingxing" />
                看过
              </span>
            </div>
          </div>
        </div>
        {/* 电影评分 */}
        <div className="movies-sc">
          <p className="heder-sc">
            <span>
              <TabIcon type="icon-fenlei-maozi" />
              猫眼购票评分
            </span>
            <b>
              {obj.wish}人想看，{obj.watched}人看过
              <TabIcon type="icon-youjiantou_huaban" />
            </b>
          </p>
          <div className="sc-box">
            <div className="sc-box-left">
              <span className="sc">{obj.sc}</span>
              <span>{obj.snum}人评</span>
            </div>
            <div className="sc-box-right">
              {obj.distributions?.map((item, index) => {
                return (
                  <p key={index}>
                    <span className="lenght">
                      <b style={{ width: item.proportion + "%" }}></b>
                    </span>
                  </p>
                );
              })}
            </div>
          </div>
        </div>
        {/* 简介 */}
        <div className="brief-introduction">
          <div className="div-title">
            <span>简介</span>
            <span>
              更多
              <TabIcon type="icon-youjiantou_huaban" />
            </span>
          </div>
          <div className="line-clamp">{obj.dra}</div>
        </div>
        <div className="brief-introduction">
          <div className="div-title">
            <span>演职人员</span>
            <span>
              全部
              <TabIcon type="icon-youjiantou_huaban" />
            </span>
          </div>
          {/* 演员相册 */}
          <div className="line-photos">
            {obj.photos?.map((item, index) => {
              return (
                <img src={item?.split("w.h").join("")} alt="" key={index} />
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};
export default withRouter(Index);
